<template>
    <div>
        <template v-if="action == 'edit' || action == 'search' ">
            <span>不建议使用</span>
        </template>
        <template v-if="action == 'table'">
            <div>
                <span class="field-details_send" v-if="fieldKey == 'pick_address'">{{data.start_area_link?data.start_area_link.name:''}}.</span>
                <span class="field-details_rec" v-if="fieldKey == 'delivery_address'">{{data.end_area_link?data.end_area_link.name:''}}.</span>

                <span v-for="(item,index) in data.tag" :key="index">
                    <span v-if="item.type === 'pick_address.abnormal' && fieldKey === 'pick_address'">
                        <span style="color: #000;">{{localValue}}{{detailAddress}}</span>
                        <span class="edit" style="padding-left: 6px" @click="init(data.id)"><i class="el-icon-edit"></i></span>
                    </span>
                    <span v-else-if="item.type === 'delivery_address.abnormal' && fieldKey === 'delivery_address'">
                        <span style="color: #000;">{{localValue}}{{detailAddress}}</span>
                        <span class="edit" style="padding-left: 6px" @click="init(data.id)"><i class="el-icon-edit"></i></span>
                    </span>
                    <span v-else-if="item.type === 'delivery_address.processed' && fieldKey === 'pick_address' " style="color: rgba(0,0,0,0.54);">{{localValue}}{{detailAddress}}</span>
                    <span v-else-if="item.type === 'pick_address.processed' && fieldKey === 'delivery_address' " style="color: rgba(0,0,0,0.54);">{{localValue}}{{detailAddress}}</span>
                    <span v-else style="color: rgba(0,0,0,0.54);">{{localValue}}{{detailAddress}}</span>
                </span>
            </div>
            <div>
            </div>
            <el-dialog
                    :title="titleName + '地址修改'"
                    :visible.sync="isShowMap"
                    width="900px"
                    top="4vh"
                    :before-close="cancelDialog">
                <div class="map-choose-box-parents">
                    <div  class="map-choose-boxaddress">
                        <div style="padding: 10px;">
                            <div style="padding: 12px 0;">
                                <span>当前地址：</span><span style="color: red;">{{localValue}}{{localCodeName}}</span>
                                <el-button size="mini" round @click="copyInputAddress">一键复制</el-button>
                            </div>
                            <div style="height: 560px;" v-loading="!loading" element-loading-text="地图拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.1)">
                                <map-select-address
                                        v-if="loading"
                                        v-on="$listeners"
                                        :isinitmap="isinitmap"
                                        :poiPicker="poiPicker"
                                        :copyAddress="copyAddress"
                                        :inputId="inputId"
                                        :lonLng="lonLng"
                                        :areaList="areaList"
                                        :markerPicker="markerPicker"
                                        :mapHeight="'500px'"
                                        :mapId="mapId"
                                        :lng="lng"
                                        :lat="lat"
                                        :scale="'10'"
                                        style="position: relative;margin-top: 10px;border: 1px solid #009688"
                                        @positionPickerOk="mapOk">
                                </map-select-address>
                            </div>
                            <el-row style="font-size: 14px">
                                <el-col :span="24" style="margin: 20px 0">
                                    <el-col :span="4" style="line-height: 42px;text-align: right;margin-right: 20px">
                                        选择地址
                                    </el-col>
                                    <el-col :span="17" class="field-address">
                                        <el-input type="text" disabled v-model="options" style="color: red"></el-input>
                                    </el-col>
                                </el-col>
                                <el-col :span="24">
                                    <el-col :span="4" style="line-height: 42px;text-align: right;margin-right: 20px">
                                        楼层门牌
                                    </el-col>
                                    <el-col :span="17">
                                        <el-input type="text" placeholder="楼层或门牌（选填）" v-model="detailAddress" style="color: red"></el-input>
                                    </el-col>
                                </el-col>
                                <el-col :span="24" style="text-align: center;margin-top: 20px">
                                    <el-button @click="cancelDialog" class="cancel">取消</el-button>
                                    <el-button type="primary" @click="comfirmChange(data.id)" :loading="confirmLoading" style="margin-left: 60px;width: 150px;">确定修改</el-button>
                                </el-col>
                            </el-row>
                        </div>

                    </div>
                </div>
            </el-dialog>
        </template>
    </div>
</template>
<script>
    import base from '../base.js';
    import MapSelectAddress from '../../map/map-init.vue'
    export default {
        extends: base,
        props: {},
        components:{
            MapSelectAddress
        },
        data() {
            return {
                options:'',
                lonLng: [],
                loading: false,
                confirmLoading: false,
                searchModel: 'like',
                lng: '',  // 传进去的经度
                lat: '', // 传进去的纬度
                longitude: '',  // 传出来的经度
                latitude: '', // 传出来的纬度
                lonKey:'lon',
                latKey:'lat',
                prefixOne:'pick_',
                prefixTwo:'delivery_',
                isShowMap: false,
                markerPicker: true,
                isinitmap: true,
                poiPicker: true,
                areaApi: 'express/area?status=1&pageSize=400',
                mapId: 'mapId' + Math.floor(Math.random() * 1000000000000000),
                inputId: 'inputId' + Math.floor(Math.random() * 1000000000000000),
                selectValue: '',
                localValue: '',
                detailAddress:'',
                lonlat:[],
                areaList:[],  // 区域列表
                titleName: '',
                localName: '',
                localCodeName: '',
                copyAddress: '',
                codeName: ''
            }
        },
        watch: {
            data: {
                handler:function (val) {
                    if (this.fieldKey == 'pick_address') {
                        this.lng = this.data[this.prefixOne + this.lonKey];
                        this.lat = this.data[this.prefixOne + this.latKey];
                        this.longitude = this.lng;
                        this.latitude = this.lat;
                        this.localValue = this.data['pick_address'];
                        this.detailAddress = this.data['pick_address_add'];
                    } else if (this.fieldKey == 'delivery_address') {
                        this.lng = this.data[this.prefixTwo + this.lonKey];
                        this.lat = this.data[this.prefixTwo + this.latKey];
                        this.longitude = this.lng;
                        this.latitude = this.lat;
                        this.localValue = this.data['delivery_address'];
                        this.detailAddress = this.data['delivery_address_add'];
                    }
                },
                deep:true
            },
            isShowMap: function (val) {
                if (val) {
                    if (this.fieldKey == 'pick_address') {
                        this.lng = this.data[this.prefixOne + this.lonKey];
                        this.lat = this.data[this.prefixOne + this.latKey];
                        this.longitude = this.lng;
                        this.latitude = this.lat;
                        this.localValue = this.data['pick_address'];
                        this.detailAddress = this.data['pick_address_add'];
                        this.localCodeName = this.data['pick_address_add'];
                        this.titleName = '寄件';
                    } else if (this.fieldKey == 'delivery_address') {
                        this.lng = this.data[this.prefixTwo + this.lonKey];
                        this.lat = this.data[this.prefixTwo + this.latKey];
                        this.longitude = this.lng;
                        this.latitude = this.lat;
                        // this.localName = this.data['delivery_address'];
                        this.localValue = this.data['delivery_address'];
                        this.detailAddress = this.data['delivery_address_add'];
                        this.localCodeName = this.data['delivery_address_add'];
                        this.titleName = '收件';
                    } else if (this.fieldKey == 'address') {
                        this.lng = this.data[this.lonKey];
                        this.lat = this.data[this.latKey];
                        this.longitude = this.lng;
                        this.latitude = this.lat;
                    }
                } else {
                    this.copyAddress = '';
                }

            }
        },
        mounted() {
            // this.localValue = this.value;
            // this.localName = this.value;
            if (this.fieldKey == 'pick_address') {
                this.lng = this.data[this.prefixOne + this.lonKey];
                this.lat = this.data[this.prefixOne + this.latKey];
                this.longitude = this.lng;
                this.latitude = this.lat;
                this.localValue = this.data['pick_address'];
                // this.localName = this.data['pick_address'];
                this.detailAddress = this.data['pick_address_add'];
                // this.localCodeName = this.data['pick_address_add'];
                this.titleName = '寄件';
            } else if (this.fieldKey == 'delivery_address') {
                this.lng = this.data[this.prefixTwo + this.lonKey];
                this.lat = this.data[this.prefixTwo + this.latKey];
                this.longitude = this.lng;
                this.latitude = this.lat;
                this.localValue = this.data['delivery_address'];
                this.detailAddress = this.data['delivery_address_add'];
                this.titleName = '收件';
            }
        },
        methods: {
            cancelDialog() {
                this.isShowMap = false;
            },
            copyInputAddress() {
                if (!this.localCodeName) {
                    this.copyAddress = this.localValue;
                } else {
                    this.copyAddress = this.localValue + this.localCodeName;
                }
            },
            init(id) {
                this.isShowMap = true;
                this.loading = false;
                if (localStorage.getItem('areaList')) {
                    this.areaList = JSON.parse(localStorage.getItem('areaList'));
                    let getOrderDetail = new Promise((resolve) => {
                        this.$http.get('express/order/' + id + "?correction=1")
                            .then((response) => {
                                resolve(response)
                            }).catch((err)=>{
                            resolve(err)
                        })
                    });
                    Promise.all([getOrderDetail])
                        .then((res)=>{
                            this.loading = true;
                            this.getOrderDetail(res[0]);
                        });
                } else {
                    let getOrderDetail = new Promise((resolve) => {
                        this.$http.get('express/order/' + id + "?correction=1")
                            .then((response) => {
                                resolve(response)
                            }).catch((err)=>{
                            resolve(err)
                        })
                    });
                    let getArea = new Promise((resolve) => {
                        this.$http.get(this.areaApi)
                            .then((response) => {
                                resolve(response)
                            }).catch((err)=>{
                            resolve(err)
                        })
                    });
                    Promise.all([getOrderDetail,getArea])
                        .then((res)=>{
                            this.loading = true;
                            this.getArea(res[1]);
                            this.getOrderDetail(res[0]);
                        });
                }
            },
            getArea(response) {
                if (response.response) {
                    if (response.response.data.msg) {
                        this.$message({
                            message: response.response.data.msg,
                            type: 'error'
                        });
                    } else {
                        this.$message({
                            message:'请求错误：' + response.response.data.msg,
                            type: 'error'
                        });
                    }
                } else {
                    if (response.data.code == 200) {
                        this.areaList = response.data.data;
                        localStorage.setItem('areaList',JSON.stringify(this.areaList));
                    }

                }
            },
            getOrderDetail(response) {
                if (response.response) {
                    if (response.response.data.msg) {
                        this.$message({
                            message: response.response.data.msg,
                            type: 'error'
                        });
                    } else {
                        this.$message({
                            message:'请求错误：' + response.response.data.msg,
                            type: 'error'
                        });
                    }
                } else {
                    if (response.data.code == 200) {
                        if (this.fieldKey == 'delivery_address') {
                            this.lonLng = [[response.data.data.delivery_location.baidu_location.lng,response.data.data.delivery_location.baidu_location.lat],[response.data.data.delivery_location.gaode_location.lng,response.data.data.delivery_location.gaode_location.lat]]
                        } else if (this.fieldKey == 'pick_address') {
                            this.lonLng = [[response.data.data.pick_location.baidu_location.lng,response.data.data.pick_location.baidu_location.lat],[response.data.data.pick_location.gaode_location.lng,response.data.data.pick_location.gaode_location.lat]]
                        } else {
                            this.lonLng = [];
                        }
                    }

                }
            },
            // getOrderDetail(id) {
            //     this.$http.get('express/order/' + id + "?correction=1")
            //         .then((response) => {
            //             if (this.fieldKey == 'delivery_address') {
            //                 this.lonLng = [[response.data.data.delivery_location.baidu_location.lng,response.data.data.delivery_location.baidu_location.lat],[response.data.data.delivery_location.gaode_location.lng,response.data.data.delivery_location.gaode_location.lat]]
            //             } else if (this.fieldKey == 'pick_address') {
            //                 this.lonLng = [[response.data.data.pick_location.baidu_location.lng,response.data.data.pick_location.baidu_location.lat],[response.data.data.pick_location.gaode_location.lng,response.data.data.pick_location.gaode_location.lat]]
            //             }
            //             this.loading = true;
            //         })
            //         .catch((error) => {
            //             this.loading = true;
            //             if (error.response.data.msg) {
            //                 this.$message.error(error.response.data.msg);
            //             } else {
            //                 this.$message.error('请求错误：' + error.response.status);
            //             }
            //         });
            // },
            // getArea() {
            //     this.$http.get(this.areaApi)
            //         .then((response) => {
            //             this.areaList = response.data.data;
            //         })
            //         .catch((error) => {
            //             if (error.response.data.msg) {
            //                 this.$message.error(error.response.data.msg);
            //             } else {
            //                 this.$message.error('请求错误：' + error.response.status);
            //             }
            //         });
            // }, // 获取区域信息
            comfirmChange(id) {
                this.confirmLoading = true;
                let params;
                if (this.fieldKey == 'pick_address') {
                    params = {
                        address_abnormal: 1,
                        pick_address_add: this.detailAddress,
                        pick_lon: this.lonlat[0],
                        pick_lat: this.lonlat[1],
                    };
                } else if (this.fieldKey == 'delivery_address') {
                    params = {
                        address_abnormal: 1,
                        delivery_address_add: this.detailAddress,
                        delivery_lon: this.lonlat[0],
                        delivery_lat: this.lonlat[1],
                    };
                }
                this.$http.put('express/order/' + id + '?address_abnormal=1', params)
                    .then((response) => {
                        console.info('response',response);
                        this.isShowMap = false;
                        this.confirmLoading = false;
                        this.$store.commit('refreshDialog');
                        this.$message({
                            message: '修改成功！',
                            type: 'success'
                        });
                    })
                    .catch((error) => {
                        this.confirmLoading = false;
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            mapOk(value) {
                this.options = value.address;
                this.lonlat = [value.position.lng,value.position.lat]

            }
        }
    }
</script>
<style lang="less">
    .field-address{
        .el-input.is-disabled .el-input__inner{
            color:rgba(255,87,34,1) !important;
        }
    }
</style>
<style lang='less' scoped>
    .color54{
        color: rgba(0,0,0,0.54);
    }
    .edit{
        font-size: 16px;
        color: #1989FA;
    }
    .edit:hover{
        cursor: pointer;
        color: blue;
    }
    .field-details_send{
        color: #FF8D00;
    }
    .field-details_rec{
        color: #9013FE;
    }
    .map-choose-box-parents{
        /*position:fixed;*/
        font-size: 16px;
        /*z-index: 1000;*/
        /*top: 0px;*/
        /*left:0px;*/
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.4);
        .map-choose-boxaddress{
            /*position: relative;*/
            /*top: 4%;*/
            /*left: 30%;*/
            /*z-index: 30000;*/
            background-color: #fff;
            /*width: 800px;*/
            /*box-shadow: 1px 1px 10px #666;*/
            /*border-radius: 8px;*/
            margin-top: 4px;
            .title{
                width:100%;
                height:42px;
                text-align: center;
                line-height: 42px;
                background:rgba(245,247,250,1);
                border-radius:10px 10px 0px 0px;
            }
            .cancel{
                margin-left: 6px;
                width: 150px;
                color:rgba(0,150,136,1);
                background:rgba(0,150,136,0.05);
                border-radius:4px;
                border:1px solid rgba(0,150,136,1);
            }

        }
    }
</style>
